<template>
	<view class="module_img_block">
		<view class="close_box" v-if="showclose">
			<view class="close_view" @click="close_click">
				<image class="close_view_ii" src="/static/images/com_close_white.png"></image>
			</view>
		</view>

		<view class="upload_mask" v-if="progress < 100 && isUpload" @click="mask_click">
			<view class="upload_fail" v-if="progress == -1">重新上传</view>
			<view class="upload_view" v-else>
				<view class="upload_loading" :style="[loading_style]"></view>
				<view class="upload_jd">{{ progress }}%</view>
			</view>
		</view>
		<image class="module_img" :src="imgsrc" :style="[module_style]" :mode="mode" @click="myimg_click"></image>
	</view>
</template>

<script>
import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	name: 'myimg',
	props: {
		urls: {
			type: [Array],
			default() {
				return [];
			},
		},
		showclose: {
			type: [Boolean],
			default: false,
		},
		isUpload: {
			type: [Boolean],
			default: false,
		},
		progress: {
			type: [Number, String],
			default: 100,
		},
		background_color: {
			type: [String],
			default: '#f9f4f6',
		},
		current: {
			type: [Number, String],
			default: 0,
		},
		imgsrc: {
			type: [String],
			default: '',
		},
		width: {
			type: [Number, String],
			default: '100',
		},
		height: {
			type: [Number, String],
			default: '0',
		},
		radius: {
			type: [Number, String],
			default: '0',
		},
		mode: {
			type: [String],
			default: 'aspectFill',
		},
	},

	data() {
		return {};
	},
	created() {},
	mounted() {},
	computed: {
		module_style() {
			let style = {};
			if (this.width > 0) {
				style['width'] = `${this.width}rpx`;
			}
			if (this.mode == 'aspectFill') {
				if (this.height > 0) {
					style['height'] = `${this.height}rpx`;
				} else {
					style['height'] = `${this.width}rpx`;
				}
			} else {
				style['height'] = `auto`;
			}

			if (this.radius > 0) {
				style['border-radius'] = `${this.radius}rpx`;
			}
			return style;
		},
		bg_style() {
			let style = {};
			if (this.radius > 0) {
				style['border-radius'] = `${this.radius}rpx`;
			}
			return style;
		},
		loading_style() {
			let style = {};
			if (this.width > 0) {
				style['width'] = `${this.width * 0.33}rpx`;
				style['height'] = `${this.width * 0.33}rpx`;
			}
			return style;
		},
	},
	methods: {
		// ...common,
		mask_click() {
			let _this = this;
			_this.$emit('reUpload', { current: _this.current, urls: _this.urls });
		},
		myimg_click() {
			let _this = this;
			_this.$emit('imgClick', { current: _this.current, urls: _this.urls });
		},
		close_click() {
			let _this = this;
			_this.$emit('closeClick', { current: _this.current, urls: _this.urls });
		},
	},
	watch: {},
};
</script>

<style lang="scss">
.module_img_block {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.close_box {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 7;
}

.upload_mask {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba($color: #000000, $alpha: 0.6);
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
}
.upload_view {
	position: relative;
}
.upload_loading {
	border: 2rpx solid #fff;
	border-right-color: transparent;
	border-radius: 50%;
	transform: rotate(0deg);
	animation-name: loading;
	animation-duration: 1s;
	// cubic-bezier(0.65, 0.05, 0.36, 1)
	animation-timing-function: linear;
	animation-delay: 0s; // 延迟
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-fill-mode: forwards;
}
.upload_jd {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 20rpx;
	color: #fff;
}

.upload_fail {
	font-size: 26rpx;
	color: #fff;
}
@keyframes loading {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.close_view {
	position: relative;
	width: 40rpx;
	height: 40rpx;
	background: rgba($color: #000000, $alpha: 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6rpx;
	&::after {
		content: '';
		position: absolute;
		right: 50%;
		top: 50%;
		width: 150%;
		height: 150%;
		transform: translate(50%, -50%);
	}
	.close_view_ii {
		width: 30rpx;
		height: 30rpx;
	}
}
.module_img {
	position: relative;
	z-index: 4;
	width: 100%;
	height: 100%;
}
</style>
